<template>
	<view class="page-content">
		<view class="flex w-full flex-wrap module-box">
			<view class="flex w-full font-bold se-title">
				我的收益
			</view>
			<view class="flex w-full justify-between items-center my-10">
				<view class="line-flex flex-wrap">
					<view class="line-flex w-full items-center label-box">
						<text class="color-grey">可结算收益</text>
						<uv-icon name="arrow-right" color="#666" size="28rpx"></uv-icon>
					</view>
					<view class="line-flex w-full items-center">
						<text class="price mr-10">{{priceFormat(magnificationMyProfit.balance)}}</text>
						<text class="color-grey">积分</text>
					</view>
				</view>
				<view class="line-flex">
					<uv-button type="primary" shape="circle" text="结算" size="small" :customStyle="{padding:'0 30rpx'}"></uv-button>
				</view>
			</view>
			<view class="line-flex split-line"></view>
			<view class="flex w-full justify-between items-center">
				<view class="line-flex flex-wrap w-50" style="border-right: 2px solid #f5f5f5;">
					<view class="line-flex w-full items-center label-box">
						<text class="color-grey">待结算收益</text>
						<uv-icon name="arrow-right" color="#666" size="28rpx"></uv-icon>
					</view>
					<view class="line-flex w-full items-center">
						<text class="font-36 mr-10">{{priceFormat(magnificationMyProfit.unWithdrawalAmount)}}</text>
						<text class="color-grey">积分</text>
					</view>
				</view>
				<view class="line-flex flex-wrap w-50" style="padding-left: 50rpx;">
					<view class="line-flex w-full items-center label-box">
						<text class="color-grey">累计收益</text>
						<uv-icon name="arrow-right" color="#666" size="28rpx"></uv-icon>
					</view>
					<view class="line-flex w-full items-center">
						<text class="font-36 mr-10">{{priceFormat(magnificationMyProfit.cumulativeAmount)}}</text>
						<text class="color-grey">积分</text>
					</view>
				</view>
			</view>
		</view>

		<!-- -->
		<view class="flex w-full items-center justify-between module-box mt-20">
			<view class="line-flex flex-wrap profit-item">
				<text class="w-full text-center price">{{ priceFormat(magnificationMyProfit.todayProfitAmount) }}</text>
				<text class="w-full text-center color-333">今日收益</text>
			</view>
			<view class="line-flex split-line-y">

			</view>
			<view class="line-flex flex-wrap profit-item">
				<text class="w-full text-center price">{{ priceFormat(magnificationMyProfit.todaySaleAmount) }}</text>
				<view class="line-flex w-full justify-center items-center label-box">
					<text class="color-333">今日业绩</text>
					<uv-icon name="arrow-right" color="#333" size="28rpx"></uv-icon>
				</view>
			</view>
			<view class="line-flex split-line-y">

			</view>
			<view class="line-flex flex-wrap profit-item">
				<view class="line-flex w-full justify-center items-center">
					<text class="price mr-10">{{ magnificationMyProfit.teamNumber || 0 }}</text>
					<text class="color-grey">人</text>
				</view>
				<view class="line-flex w-full justify-center items-center label-box">
					<text class="color-333">我的客户</text>
					<uv-icon name="arrow-right" color="#333" size="28rpx"></uv-icon>
				</view>
			</view>
		</view>
		<!-- -->
		<view class="flex w-full flex-wrap module-box mt-20">
			<view class="flex w-full font-bold se-title">
				我的奖励
			</view>
			<view class="flex w-full" style="padding-top: 20rpx;">
				<view class="line-flex flex-wrap justify-center">
					<image class="nav-img" src="@/static/imgs/nav_01.png" mode="widthFix"></image>
					<text class="w-full text-center color-333">分享奖励</text>
				</view>
				<view class="line-flex flex-wrap justify-center">
					<image class="nav-img" src="@/static/imgs/nav_02.png" mode="widthFix"></image>
					<text class="w-full text-center color-333">团队业绩</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useUserStore } from '@/store/module.js';
	import { onMounted, ref, reactive } from 'vue';
	import { getUserInfo, getAppMyProfit } from '@/config/api.js';
	import { priceFormat } from '@/utils/index.js';
	
	const magnificationMyProfit = reactive({
		voucher: null,
		balance: null,
		unWithdrawalAmount: null,
		cumulativeAmount: null,
		todayProfitAmount: null,
		teamNumber: null,
		todaySaleAmount:null,
		allowWithdrawal: false,
		cumulativeOrderAmount: null,
	})

	const userStore = useUserStore()
	onMounted(() => {
		getAppMyProfitAction();
	})

	const getAppMyProfitAction = async () => {
		const res = await getAppMyProfit();
		if (res.code === 100) {
			magnificationMyProfit.voucher = res.data.voucher || 0;
			magnificationMyProfit.balance = res.data.balance || 0;
			magnificationMyProfit.unWithdrawalAmount = res.data.unWithdrawalAmount || 0;
			magnificationMyProfit.cumulativeAmount = res.data.cumulativeAmount || 0;
			magnificationMyProfit.todayProfitAmount = res.data.todayProfitAmount || 0;
			magnificationMyProfit.teamNumber = res.data.teamNumber || 0;
			magnificationMyProfit.allowWithdrawal = res.data.allowWithdrawal || 0;
			magnificationMyProfit.cumulativeOrderAmount = res.data.cumulativeOrderAmount || 0;
			magnificationMyProfit.todaySaleAmount = res.data.todaySaleAmount || 0;
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		padding: 20rpx;
		padding-top: 160rpx;
		background-color: #f5f5f5;
	}

	.se-title {
		font-size: 30rpx;
	}

	.module-box {
		padding: 30rpx 20rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.price {
		color: #ee0a24;
		font-size: 36rpx;
	}

	.label-box {
		height: 50rpx;
	}

	.split-line {
		width: 700rpx;
		height: 4rpx;
		background-color: #f5f5f5;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
	}

	.split-line-y {
		width: 4rpx;
		height: 50rpx;
		background-color: #f5f5f5;
	}
	.profit-item{
		//width: 33%;
	}
	.nav-img {
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 10rpx;
	}
</style>